<!DOCTYPE html>
<html lang="en-US">
	
<!-- Mirrored from vkuviewdoc.fsq.pub/components/form.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 May 2025 17:31:01 GMT -->
<head>
		<title>Form 表单 | uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！</title>
		<meta charset="utf-8">
		<script>
		  var _hmt = _hmt || [];
		  (function() {
		    var hm = document.createElement("script");
		    hm.src = "../../hm.baidu.com/hm34bd.js?1d1565dd0782e66106e6a42c79ed2554";
		    var s = document.getElementsByTagName("script")[0]; 
		    s.parentNode.insertBefore(hm, s);
		  })();
		  </script>
		<meta name="description" content="同时支持 Vue3.0 和 Vue2.0，你没看错，现在 uView 支持 Vue3.0 了！（不支持nvue，此版本为uView1.0的分支）">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="vk-uview,uviewVue3.0,uview,uView,uviewui,uview ui,uviewUI,uViewui,uViewUI,uView UI,uni ui,uni UI,uni-app ui框架,uni-app UI框架,uniapp ui,ui,UI框架,uniapp ui框架,uniapp UI">
		<link rel="preload" href="../assets/css/0.styles.61168ff3.css" as="style"><link rel="preload" href="../assets/js/app.06a5b7ec.js" as="script"><link rel="preload" href="../assets/js/3.b1cc55a0.js" as="script"><link rel="preload" href="../assets/js/4.4b844322.js" as="script"><link rel="preload" href="../assets/js/41.f590ad3d.js" as="script"><link rel="preload" href="../assets/js/19.2b0b9da7.js" as="script"><link rel="preload" href="../assets/js/9.ba52e2b0.js" as="script"><link rel="preload" href="../assets/js/6.2c513bee.js" as="script"><link rel="prefetch" href="../assets/js/1.98a9916e.js"><link rel="prefetch" href="../assets/js/10.038f08bd.js"><link rel="prefetch" href="../assets/js/100.a4e49f4f.js"><link rel="prefetch" href="../assets/js/101.5bb80e81.js"><link rel="prefetch" href="../assets/js/102.341da24c.js"><link rel="prefetch" href="../assets/js/103.59b833cd.js"><link rel="prefetch" href="../assets/js/104.a145c535.js"><link rel="prefetch" href="../assets/js/105.c8fea0c4.js"><link rel="prefetch" href="../assets/js/106.d1e658a7.js"><link rel="prefetch" href="../assets/js/107.5f95aed3.js"><link rel="prefetch" href="../assets/js/108.8d2b2544.js"><link rel="prefetch" href="../assets/js/109.10c99e03.js"><link rel="prefetch" href="../assets/js/11.8e74d8b9.js"><link rel="prefetch" href="../assets/js/110.4a7e9307.js"><link rel="prefetch" href="../assets/js/111.773e8680.js"><link rel="prefetch" href="../assets/js/112.c7465195.js"><link rel="prefetch" href="../assets/js/113.b86e8be8.js"><link rel="prefetch" href="../assets/js/114.9ba8246a.js"><link rel="prefetch" href="../assets/js/115.48e5c3e4.js"><link rel="prefetch" href="../assets/js/116.623d8a73.js"><link rel="prefetch" href="../assets/js/117.d9fc756d.js"><link rel="prefetch" href="../assets/js/118.668a7d9f.js"><link rel="prefetch" href="../assets/js/119.6ca5a6b7.js"><link rel="prefetch" href="../assets/js/12.1490d9ad.js"><link rel="prefetch" href="../assets/js/120.8008a6be.js"><link rel="prefetch" href="../assets/js/121.29c37c36.js"><link rel="prefetch" href="../assets/js/122.00c188a8.js"><link rel="prefetch" href="../assets/js/123.22e24add.js"><link rel="prefetch" href="../assets/js/124.e5837e2d.js"><link rel="prefetch" href="../assets/js/125.bd96786c.js"><link rel="prefetch" href="../assets/js/126.e58693e0.js"><link rel="prefetch" href="../assets/js/127.7df2a7cb.js"><link rel="prefetch" href="../assets/js/128.46d0d44f.js"><link rel="prefetch" href="../assets/js/129.533ad2e4.js"><link rel="prefetch" href="../assets/js/13.26869a5e.js"><link rel="prefetch" href="../assets/js/130.33870daa.js"><link rel="prefetch" href="../assets/js/131.6ed8ceeb.js"><link rel="prefetch" href="../assets/js/132.ddabb1d9.js"><link rel="prefetch" href="../assets/js/133.9ec99fba.js"><link rel="prefetch" href="../assets/js/134.ddf9fd84.js"><link rel="prefetch" href="../assets/js/135.c78b3861.js"><link rel="prefetch" href="../assets/js/136.9f35dad7.js"><link rel="prefetch" href="../assets/js/137.f76e23c3.js"><link rel="prefetch" href="../assets/js/138.527154ce.js"><link rel="prefetch" href="../assets/js/139.20fc60a7.js"><link rel="prefetch" href="../assets/js/14.f7c8080a.js"><link rel="prefetch" href="../assets/js/140.94a3c889.js"><link rel="prefetch" href="../assets/js/141.dbec7630.js"><link rel="prefetch" href="../assets/js/142.01e40518.js"><link rel="prefetch" href="../assets/js/143.e69db0a4.js"><link rel="prefetch" href="../assets/js/144.6b44c549.js"><link rel="prefetch" href="../assets/js/145.be0da9a2.js"><link rel="prefetch" href="../assets/js/146.cf66d7a5.js"><link rel="prefetch" href="../assets/js/147.0d33398d.js"><link rel="prefetch" href="../assets/js/148.7ec3725c.js"><link rel="prefetch" href="../assets/js/149.94b68d3b.js"><link rel="prefetch" href="../assets/js/15.9c539d25.js"><link rel="prefetch" href="../assets/js/150.a3cb5d67.js"><link rel="prefetch" href="../assets/js/151.353415e1.js"><link rel="prefetch" href="../assets/js/152.a0e625f0.js"><link rel="prefetch" href="../assets/js/153.9f9ff9df.js"><link rel="prefetch" href="../assets/js/154.3926195f.js"><link rel="prefetch" href="../assets/js/155.4ff0eab8.js"><link rel="prefetch" href="../assets/js/156.30421ecd.js"><link rel="prefetch" href="../assets/js/16.9311470f.js"><link rel="prefetch" href="../assets/js/17.1d2427af.js"><link rel="prefetch" href="../assets/js/18.9f71dea7.js"><link rel="prefetch" href="../assets/js/20.4e7fd7f2.js"><link rel="prefetch" href="../assets/js/21.eeb64d6d.js"><link rel="prefetch" href="../assets/js/22.eeed70a0.js"><link rel="prefetch" href="../assets/js/23.ebadd966.js"><link rel="prefetch" href="../assets/js/24.623888d6.js"><link rel="prefetch" href="../assets/js/25.997678dc.js"><link rel="prefetch" href="../assets/js/26.bdc2a6fc.js"><link rel="prefetch" href="../assets/js/27.14956264.js"><link rel="prefetch" href="../assets/js/28.3e836b17.js"><link rel="prefetch" href="../assets/js/29.88996b95.js"><link rel="prefetch" href="../assets/js/30.26760ff7.js"><link rel="prefetch" href="../assets/js/31.169925f0.js"><link rel="prefetch" href="../assets/js/32.fc848ffd.js"><link rel="prefetch" href="../assets/js/33.4a7b20b5.js"><link rel="prefetch" href="../assets/js/34.080a5b2d.js"><link rel="prefetch" href="../assets/js/35.5664384b.js"><link rel="prefetch" href="../assets/js/36.e6f2d7c1.js"><link rel="prefetch" href="../assets/js/37.7fffb245.js"><link rel="prefetch" href="../assets/js/38.2a818c4b.js"><link rel="prefetch" href="../assets/js/39.b75d1d1f.js"><link rel="prefetch" href="../assets/js/40.eebb261c.js"><link rel="prefetch" href="../assets/js/42.3a5a9ad1.js"><link rel="prefetch" href="../assets/js/43.315af682.js"><link rel="prefetch" href="../assets/js/44.e699cfc9.js"><link rel="prefetch" href="../assets/js/45.070488b1.js"><link rel="prefetch" href="../assets/js/46.29f9b10c.js"><link rel="prefetch" href="../assets/js/47.a49c9691.js"><link rel="prefetch" href="../assets/js/48.901960ce.js"><link rel="prefetch" href="../assets/js/49.90f26de6.js"><link rel="prefetch" href="../assets/js/5.1822a725.js"><link rel="prefetch" href="../assets/js/50.d98ea474.js"><link rel="prefetch" href="../assets/js/51.7e81edb0.js"><link rel="prefetch" href="../assets/js/52.ae744cc4.js"><link rel="prefetch" href="../assets/js/53.a87579ea.js"><link rel="prefetch" href="../assets/js/54.09cf1cd4.js"><link rel="prefetch" href="../assets/js/55.8dbe32a9.js"><link rel="prefetch" href="../assets/js/56.4cc4e86e.js"><link rel="prefetch" href="../assets/js/57.5fa9755d.js"><link rel="prefetch" href="../assets/js/58.8a511947.js"><link rel="prefetch" href="../assets/js/59.7f699905.js"><link rel="prefetch" href="../assets/js/60.5cd6bf05.js"><link rel="prefetch" href="../assets/js/61.8e3a5252.js"><link rel="prefetch" href="../assets/js/62.c196204b.js"><link rel="prefetch" href="../assets/js/63.cf346896.js"><link rel="prefetch" href="../assets/js/64.0525bb5d.js"><link rel="prefetch" href="../assets/js/65.2d0a71fc.js"><link rel="prefetch" href="../assets/js/66.7155e206.js"><link rel="prefetch" href="../assets/js/67.40077362.js"><link rel="prefetch" href="../assets/js/68.5bf58e97.js"><link rel="prefetch" href="../assets/js/69.d955f75b.js"><link rel="prefetch" href="../assets/js/7.1d1f1c24.js"><link rel="prefetch" href="../assets/js/70.a8cce98b.js"><link rel="prefetch" href="../assets/js/71.da703543.js"><link rel="prefetch" href="../assets/js/72.c04dfa52.js"><link rel="prefetch" href="../assets/js/73.d07ef280.js"><link rel="prefetch" href="../assets/js/74.8461f6a0.js"><link rel="prefetch" href="../assets/js/75.b4e8bf21.js"><link rel="prefetch" href="../assets/js/76.2df0e4fa.js"><link rel="prefetch" href="../assets/js/77.80fba507.js"><link rel="prefetch" href="../assets/js/78.167eb1f2.js"><link rel="prefetch" href="../assets/js/79.8de07f16.js"><link rel="prefetch" href="../assets/js/8.70b4860e.js"><link rel="prefetch" href="../assets/js/80.62ae9ff8.js"><link rel="prefetch" href="../assets/js/81.6d66b374.js"><link rel="prefetch" href="../assets/js/82.3200cf78.js"><link rel="prefetch" href="../assets/js/83.1d9c3fce.js"><link rel="prefetch" href="../assets/js/84.d9f947a9.js"><link rel="prefetch" href="../assets/js/85.85a4c72a.js"><link rel="prefetch" href="../assets/js/86.93c948f9.js"><link rel="prefetch" href="../assets/js/87.468468cc.js"><link rel="prefetch" href="../assets/js/88.e5fe3f13.js"><link rel="prefetch" href="../assets/js/89.724b1038.js"><link rel="prefetch" href="../assets/js/90.16fb68a1.js"><link rel="prefetch" href="../assets/js/91.338ca55d.js"><link rel="prefetch" href="../assets/js/92.508f7300.js"><link rel="prefetch" href="../assets/js/93.50d169d1.js"><link rel="prefetch" href="../assets/js/94.54461a32.js"><link rel="prefetch" href="../assets/js/95.8f712236.js"><link rel="prefetch" href="../assets/js/96.4c8d5f01.js"><link rel="prefetch" href="../assets/js/97.da347ee4.js"><link rel="prefetch" href="../assets/js/98.94680b58.js"><link rel="prefetch" href="../assets/js/99.7d895609.js">
		<link rel="stylesheet" href="../assets/css/0.styles.61168ff3.css">
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "../../hm.baidu.com/hm81c3.js?43e7eadc8f61e1e064906952da7d51f0";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</head>
	<body>
		<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="../index.html" class="home-link router-link-active"><img src="../common/logo.png" alt="uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！" class="logo"> <span class="site-name can-hide">uView</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="../guide/demo.html" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="intro.html" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="../js/intro.html" class="nav-link">
  JS
</a></div><div class="nav-item"><a href="../layout/intro.html" class="nav-link">
  模板
</a></div><div class="nav-item"><a href="resource.html" class="nav-link">
  资源
</a></div><div class="nav-item"><a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  插件市场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/vk-uni/vk-uview-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="DCloud插件市场" class="dropdown-title"><span class="title">VK其他插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="DCloud插件市场" class="mobile-dropdown-title"><span class="title">VK其他插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2204" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-router（client端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5043" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-admin（admin端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5642" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uni-pay（统一支付）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2848" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-data-goods-sku-popup（sku组件）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uview-ui（uView Vue3.0）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6158" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-redis
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6089" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud数据库一键搬家工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6663" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-hbx插件（开发辅助工具）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/publisher?id=164406" target="_blank" rel="noopener noreferrer" class="nav-link external">
  查看更多
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="原版uView" class="dropdown-title"><span class="title">原版uView</span> <span class="arrow down"></span></button> <button type="button" aria-label="原版uView" class="mobile-dropdown-title"><span class="title">原版uView</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v1.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div><aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="../guide/demo.html" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="intro.html" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="../js/intro.html" class="nav-link">
  JS
</a></div><div class="nav-item"><a href="../layout/intro.html" class="nav-link">
  模板
</a></div><div class="nav-item"><a href="resource.html" class="nav-link">
  资源
</a></div><div class="nav-item"><a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  插件市场
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://gitee.com/vk-uni/vk-uview-ui" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="DCloud插件市场" class="dropdown-title"><span class="title">VK其他插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="DCloud插件市场" class="mobile-dropdown-title"><span class="title">VK其他插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2204" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-router（client端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5043" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud-admin（admin端）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=5642" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uni-pay（统一支付）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=2848" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-data-goods-sku-popup（sku组件）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6692" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-uview-ui（uView Vue3.0）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6158" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-redis
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6089" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-unicloud数据库一键搬家工具
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/plugin?id=6663" target="_blank" rel="noopener noreferrer" class="nav-link external">
  vk-hbx插件（开发辅助工具）
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://ext.dcloud.net.cn/publisher?id=164406" target="_blank" rel="noopener noreferrer" class="nav-link external">
  查看更多
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="原版uView" class="dropdown-title"><span class="title">原版uView</span> <span class="arrow down"></span></button> <button type="button" aria-label="原版uView" class="mobile-dropdown-title"><span class="title">原版uView</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://v1.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  1.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.X
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>起步</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="addQQGroup.html" class="sidebar-link">加QQ群交流反馈</a></li><li><a href="intro.html" class="sidebar-link">介绍</a></li><li><a href="install.html" class="sidebar-link">安装</a></li><li><a href="quickstart.html" class="sidebar-link">快速上手</a></li><li><a href="common.html" class="sidebar-link">内置样式</a></li><li><a href="feature.html" class="sidebar-link">注意事项</a></li><li><a href="nvue.html" class="sidebar-link">Nvue排错指南</a></li><li><a href="changelog.html" class="sidebar-link">更新日志</a></li><li><a href="changeGuide.html" class="sidebar-link">升级指南</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>基础组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="color.html" class="sidebar-link">Color 色彩</a></li><li><a href="icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="image.html" class="sidebar-link">Image 图片</a></li><li><a href="button.html" class="sidebar-link">Button 按钮</a></li><li><a href="layout.html" class="sidebar-link">Layout 布局</a></li><li><a href="cell.html" class="sidebar-link">Cell 单元格</a></li><li><a href="badge.html" class="sidebar-link">Badge 徽标数</a></li><li><a href="tag.html" class="sidebar-link">Tag 标签</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading open"><span>表单组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="input.html" class="sidebar-link">Input 输入框</a></li><li><a href="form.html" aria-current="page" class="active sidebar-link">Form 表单</a></li><li><a href="calendar.html" class="sidebar-link">Calendar 日历</a></li><li><a href="select.html" class="sidebar-link">Select 列选择器</a></li><li><a href="keyboard.html" class="sidebar-link">Keyboard 键盘</a></li><li><a href="picker.html" class="sidebar-link">Picker 选择器</a></li><li><a href="rate.html" class="sidebar-link">Rate 评分</a></li><li><a href="search.html" class="sidebar-link">Search 搜索</a></li><li><a href="numberBox.html" class="sidebar-link">NumberBox 步进器</a></li><li><a href="upload.html" class="sidebar-link">Upload 上传</a></li><li><a href="verificationCode.html" class="sidebar-link">VerificationCode 验证码倒计时</a></li><li><a href="field.html" class="sidebar-link">Field 输入框</a></li><li><a href="checkbox.html" class="sidebar-link">Checkbox 复选框</a></li><li><a href="radio.html" class="sidebar-link">Radio 单选框</a></li><li><a href="switch.html" class="sidebar-link">Switch 开关选择器</a></li><li><a href="slider.html" class="sidebar-link">Slider 滑动选择器</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>数据组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="circleProgress.html" class="sidebar-link">CircleProgress 圆形进度条</a></li><li><a href="lineProgress.html" class="sidebar-link">LineProgress 线形进度条</a></li><li><a href="table.html" class="sidebar-link">Table 表格</a></li><li><a href="countDown.html" class="sidebar-link">CountDown 倒计时</a></li><li><a href="countTo.html" class="sidebar-link">CountTo 数字滚动</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>反馈组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="actionSheet.html" class="sidebar-link">ActionSheet 操作菜单</a></li><li><a href="alertTips.html" class="sidebar-link">AlertTips 警告提示</a></li><li><a href="toast.html" class="sidebar-link">Toast 消息提示</a></li><li><a href="noticeBar.html" class="sidebar-link">NoticeBar 滚动通知</a></li><li><a href="topTips.html" class="sidebar-link">TopTips 顶部提示</a></li><li><a href="collapse.html" class="sidebar-link">Collapse 折叠面板</a></li><li><a href="popup.html" class="sidebar-link">Popup 弹出层</a></li><li><a href="swipeAction.html" class="sidebar-link">SwipeAction 滑动操作</a></li><li><a href="modal.html" class="sidebar-link">Modal 模态框</a></li><li><a href="fullScreen.html" class="sidebar-link">fullScreen 压窗屏</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>布局组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="line.html" class="sidebar-link">Line 线条</a></li><li><a href="card.html" class="sidebar-link">Card 卡片</a></li><li><a href="mask.html" class="sidebar-link">Mask 遮罩层</a></li><li><a href="noNetwork.html" class="sidebar-link">NoNetwork 无网络提示</a></li><li><a href="grid.html" class="sidebar-link">Grid 宫格布局</a></li><li><a href="swiper.html" class="sidebar-link">Swiper 轮播图</a></li><li><a href="timeLine.html" class="sidebar-link">TimeLine 时间轴</a></li><li><a href="skeleton.html" class="sidebar-link">Skeleton 骨架屏</a></li><li><a href="sticky.html" class="sidebar-link">Sticky 吸顶</a></li><li><a href="waterfall.html" class="sidebar-link">Waterfall 瀑布流</a></li><li><a href="divider.html" class="sidebar-link">Divider 分割线</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>导航组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="dropdown.html" class="sidebar-link">Dropdown 下拉菜单</a></li><li><a href="tabbar.html" class="sidebar-link">Tabbar 底部导航栏</a></li><li><a href="backTop.html" class="sidebar-link">BackTop 返回顶部</a></li><li><a href="navbar.html" class="sidebar-link">Navbar 自定义导航栏</a></li><li><a href="tabs.html" class="sidebar-link">tabs 标签</a></li><li><a href="tabsSwiper.html" class="sidebar-link">tabsSwiper 全屏选项卡</a></li><li><a href="subsection.html" class="sidebar-link">Subsection 分段器</a></li><li><a href="indexList.html" class="sidebar-link">IndexList 索引列表</a></li><li><a href="steps.html" class="sidebar-link">Steps 步骤条</a></li><li><a href="empty.html" class="sidebar-link">Empty 内容为空</a></li><li><a href="link.html" class="sidebar-link">Link 超链接</a></li><li><a href="section.html" class="sidebar-link">Section 查看更多</a></li></ul></section></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>其他组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="parse.html" class="sidebar-link">Parse 富文本解析器</a></li><li><a href="messageInput.html" class="sidebar-link">MessageInput 验证码输入</a></li><li><a href="avatarCropper.html" class="sidebar-link">AvatarCropper 头像裁剪</a></li><li><a href="loadMore.html" class="sidebar-link">loadMore 加载更多</a></li><li><a href="readMore.html" class="sidebar-link">ReadMore 展开阅读更多</a></li><li><a href="lazyLoad.html" class="sidebar-link">LazyLoad 懒加载</a></li><li><a href="gap.html" class="sidebar-link">Gap 间隔槽</a></li><li><a href="avatar.html" class="sidebar-link">Avatar 头像</a></li><li><a href="loading.html" class="sidebar-link">Loading 加载动画</a></li></ul></section></li></ul></section></li></ul> </aside></div> <main class="page"> <div class="theme-default-content content__default" data-v-510255f9 data-v-510255f9><h2 id="form-表单" data-v-510255f9><a href="#form-表单" class="header-anchor" data-v-510255f9>#</a> Form 表单 <a href="#api" class="anchor" data-v-2680b636 data-v-510255f9><img src="../common/to_api.png" data-v-2680b636></a></h2> <p data-v-510255f9>此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。</p> <div class="demo-model" data-v-05b12073 data-v-510255f9><div class="model-content" data-v-05b12073><iframe scrolling="auto" frameborder="0" src="https://uviewdoc.fsq.pub/#/pages/componentsA/form/index" id="demo-modal" class="iframe" data-v-05b12073></iframe></div></div> <h3 id="平台差异说明" data-v-510255f9><a href="#平台差异说明" class="header-anchor" data-v-510255f9>#</a> 平台差异说明</h3> <table data-v-510255f9><thead data-v-510255f9><tr data-v-510255f9><th style="text-align:center;" data-v-510255f9>App</th> <th style="text-align:center;" data-v-510255f9>H5</th> <th style="text-align:center;" data-v-510255f9>微信小程序</th> <th style="text-align:center;" data-v-510255f9>支付宝小程序</th> <th style="text-align:center;" data-v-510255f9>百度小程序</th> <th style="text-align:center;" data-v-510255f9>头条小程序</th> <th style="text-align:center;" data-v-510255f9>QQ小程序</th></tr></thead> <tbody data-v-510255f9><tr data-v-510255f9><td style="text-align:center;" data-v-510255f9>√</td> <td style="text-align:center;" data-v-510255f9>√</td> <td style="text-align:center;" data-v-510255f9>√</td> <td style="text-align:center;" data-v-510255f9>√</td> <td style="text-align:center;" data-v-510255f9>√</td> <td style="text-align:center;" data-v-510255f9>√</td> <td style="text-align:center;" data-v-510255f9>√</td></tr></tbody></table> <h3 id="基本使用" data-v-510255f9><a href="#基本使用" class="header-anchor" data-v-510255f9>#</a> 基本使用</h3> <p data-v-510255f9>此组件一般是用于表单验证使用，每一个表单域由一个<code data-v-510255f9>u-form-item</code>组成，表单域中可以放置<code data-v-510255f9>u-input</code>、<code data-v-510255f9>u-checkbox</code>、<code data-v-510255f9>u-radio</code>、<code data-v-510255f9>u-switch</code>等。</p> <ul data-v-510255f9><li data-v-510255f9>在表单组中，通过<code data-v-510255f9>model</code>参数绑定一个对象，这个对象的属性为各个<code data-v-510255f9>u-form-item</code>内组件的对应变量。</li> <li data-v-510255f9>由于表单验证和绑定表单规则时，需要通过<code data-v-510255f9>ref</code>操作，故这里需要给<code data-v-510255f9>form</code>组件声明<code data-v-510255f9>ref=&quot;form1&quot;</code>属性。（Vue3中ref值不可以=组件名，故ref=&quot;uForm&quot; 是会报错的）</li> <li data-v-510255f9>关于<code data-v-510255f9>u-from-item</code>内其他可能包含的诸如<code data-v-510255f9>input</code>、<code data-v-510255f9>radio</code>等组件，请见各自组件的相关文档说明。</li></ul> <p data-v-510255f9>下方为一个经典表单的示例，包含<code data-v-510255f9>input</code>、<code data-v-510255f9>textarea</code>、<code data-v-510255f9>radio</code>、<code data-v-510255f9>checkbox</code>、<code data-v-510255f9>switch</code>的组合使用：</p> <div class="language-html extra-class" data-v-510255f9><pre class="language-html" data-v-510255f9><code data-v-510255f9><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form</span> <span class="token attr-name" data-v-510255f9>:model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>ref</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form1<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>姓名<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>name<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.name<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>生日<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>birthday<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.birthday<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>type</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>select<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>@click</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>calendar1.show=true<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-calendar</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>calendar1.show<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>mode</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>date<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>@change</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>onCalendar1<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-calendar</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>简介<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>intro<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.intro<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>性别<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>sex<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>select1.current.label<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>type</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>select<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>@click</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>select1.show=true<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>水果<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>checkbox<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-checkbox-group</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.checkbox<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-checkbox</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>item.checked<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>v-for</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>(item, index) in checkboxList1<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>:key</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>index<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>:name</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>item.name<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
					{{ item.name }}
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-checkbox</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-checkbox-group</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>味道<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>radio<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-radio-group</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.radio<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-radio</span> <span class="token attr-name" data-v-510255f9>v-for</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>(item, index) in radioList1<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>:key</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>index<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>:name</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>item.name<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>:disabled</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>item.disabled<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
					{{ item.name }}
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-radio</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-radio-group</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>开关<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>switchVal<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span> <span class="token attr-name" data-v-510255f9><span class="token namespace" data-v-510255f9>v-slot:</span>right</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-switch</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.switchVal<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-switch</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-select</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>select1.show<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>:list</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>select1.list<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>@confirm</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>onSelect1<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-select</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>button</span> <span class="token attr-name" data-v-510255f9>@click</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>submit<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>提交<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>button</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>text</span> <span class="token attr-name" data-v-510255f9>space</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>ensp<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>{{ JSON.stringify(form,null,2) }}<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>text</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token script" data-v-510255f9><span class="token language-javascript" data-v-510255f9>
	<span class="token keyword" data-v-510255f9>export</span> <span class="token keyword" data-v-510255f9>default</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token function" data-v-510255f9>data</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token keyword" data-v-510255f9>return</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>form</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
					<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>birthday</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;&quot;</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>sex</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>checkbox</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>radio</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>switchVal</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span>
				<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>checkboxList1</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'苹果'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>checked</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>disabled</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span>
					<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'雪梨'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>checked</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>disabled</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span>
					<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'柠檬'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>checked</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>disabled</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>radioList1</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'鲜甜'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>disabled</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span>
					<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'麻辣'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>disabled</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>select1</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
					<span class="token literal-property property" data-v-510255f9>show</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>current</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span><span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>list</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token punctuation" data-v-510255f9>{</span>
							<span class="token literal-property property" data-v-510255f9>value</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>1</span><span class="token punctuation" data-v-510255f9>,</span>
							<span class="token literal-property property" data-v-510255f9>label</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'男'</span>
						<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token punctuation" data-v-510255f9>{</span>
							<span class="token literal-property property" data-v-510255f9>value</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>2</span><span class="token punctuation" data-v-510255f9>,</span>
							<span class="token literal-property property" data-v-510255f9>label</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'女'</span>
						<span class="token punctuation" data-v-510255f9>}</span>
					<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>calendar1</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
					<span class="token literal-property property" data-v-510255f9>show</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>false</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
					<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
						<span class="token punctuation" data-v-510255f9>{</span> <span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请输入姓名'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span> <span class="token punctuation" data-v-510255f9>}</span>
					<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>birthday</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
						<span class="token punctuation" data-v-510255f9>{</span> <span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请选择日历'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span> <span class="token punctuation" data-v-510255f9>}</span>
					<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>checkbox</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
						<span class="token punctuation" data-v-510255f9>{</span> <span class="token literal-property property" data-v-510255f9>type</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;array&quot;</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请选择水果'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span> <span class="token punctuation" data-v-510255f9>}</span>
					<span class="token punctuation" data-v-510255f9>]</span>
				<span class="token punctuation" data-v-510255f9>}</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token function" data-v-510255f9>onReady</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>setRules</span><span class="token punctuation" data-v-510255f9>(</span><span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>rules<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token literal-property property" data-v-510255f9>methods</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token function" data-v-510255f9>onSelect1</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>arr</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>let</span> current <span class="token operator" data-v-510255f9>=</span> arr<span class="token punctuation" data-v-510255f9>[</span><span class="token number" data-v-510255f9>0</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>;</span>
				<span class="token keyword" data-v-510255f9>let</span> value <span class="token operator" data-v-510255f9>=</span> current<span class="token punctuation" data-v-510255f9>.</span>value<span class="token punctuation" data-v-510255f9>;</span>
				<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>select1<span class="token punctuation" data-v-510255f9>.</span>current <span class="token operator" data-v-510255f9>=</span> current<span class="token punctuation" data-v-510255f9>;</span>
				<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>form<span class="token punctuation" data-v-510255f9>.</span>sex <span class="token operator" data-v-510255f9>=</span> value<span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token function" data-v-510255f9>submit</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>validate</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>valid</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
					console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span>valid<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
					<span class="token keyword" data-v-510255f9>if</span> <span class="token punctuation" data-v-510255f9>(</span>valid<span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
						uni<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>showToast</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>{</span>
							<span class="token literal-property property" data-v-510255f9>icon</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;none&quot;</span><span class="token punctuation" data-v-510255f9>,</span>
							<span class="token literal-property property" data-v-510255f9>title</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;表单验证通过&quot;</span>
						<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token function" data-v-510255f9>onCalendar1</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>e</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>form<span class="token punctuation" data-v-510255f9>.</span>birthday <span class="token operator" data-v-510255f9>=</span> e<span class="token punctuation" data-v-510255f9>.</span>result<span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span>
		<span class="token punctuation" data-v-510255f9>}</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
</code></pre></div><h3 id="form-item组件说明" data-v-510255f9><a href="#form-item组件说明" class="header-anchor" data-v-510255f9>#</a> Form-item组件说明</h3> <p data-v-510255f9>此组件一般需要搭配<code data-v-510255f9>Form</code>组件使用，也可以单独搭配<code data-v-510255f9>Input</code>等组件使用，由于此组件参数较多，这里只对其中参数最简要介绍，其余请见底部的API说明：</p> <ul data-v-510255f9><li data-v-510255f9><code data-v-510255f9>prop</code>为传入<code data-v-510255f9>Form</code>组件的<code data-v-510255f9>model</code>中的属性字段，如果需要表单验证，此属性是必填的。</li> <li data-v-510255f9><code data-v-510255f9>label-position</code>可以配置左侧&quot;label&quot;的对齐方式，可选为<code data-v-510255f9>left</code>和<code data-v-510255f9>top</code>。</li> <li data-v-510255f9><code data-v-510255f9>border-bottom</code>是否显示表单域的下划线，如果给<code data-v-510255f9>Input</code>组件配置了边框，可以将此属性设置为<code data-v-510255f9>false</code>，从而隐藏默认的下划线。</li> <li data-v-510255f9>如果想在表单域配置左右的图标(或小图片，1.3.0开始，<a href="icon.html" data-v-510255f9>Icon 图标</a>可以配置图片)，可以通过<code data-v-510255f9>left-icon</code>和<code data-v-510255f9>right-icon</code>参数实现。</li></ul> <h3 id="表单验证" data-v-510255f9><a href="#表单验证" class="header-anchor" data-v-510255f9>#</a> 表单验证</h3> <p data-v-510255f9>uView的表单组件具备完整的验证功能，在开始之前，需要了解如下几个注意事项，方面您快速上手：</p> <h4 id="form组件绑定model参数" data-v-510255f9><a href="#form组件绑定model参数" class="header-anchor" data-v-510255f9>#</a> <code data-v-510255f9>Form</code>组件绑定<code data-v-510255f9>model</code>参数</h4> <ul data-v-510255f9><li data-v-510255f9><code data-v-510255f9>model</code>参数为一个对象，对象属性为需要验证的变量名。</li> <li data-v-510255f9>通过<code data-v-510255f9>ref</code>，在<code data-v-510255f9>onReady</code>生命周期调用组件的<code data-v-510255f9>setRules</code>方法绑定验证规则，无法通过<code data-v-510255f9>props</code>传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。</li></ul> <div class="language-html extra-class" data-v-510255f9><pre class="language-html" data-v-510255f9><code data-v-510255f9><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>view</span> <span class="token attr-name" data-v-510255f9>class</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span><span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form</span> <span class="token attr-name" data-v-510255f9>:model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>ref</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form1<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>姓名<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>name<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.name<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>简介<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>intro<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.intro<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-button</span> <span class="token attr-name" data-v-510255f9>@click</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>submit<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>提交<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-button</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>view</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token script" data-v-510255f9><span class="token language-javascript" data-v-510255f9>
<span class="token keyword" data-v-510255f9>export</span> <span class="token keyword" data-v-510255f9>default</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token function" data-v-510255f9>data</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>return</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>form</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
					<span class="token punctuation" data-v-510255f9>{</span> 
						<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span> 
						<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请输入姓名'</span><span class="token punctuation" data-v-510255f9>,</span> 
						<span class="token comment" data-v-510255f9>// 可以单个或者同时写两个触发验证方式 </span>
						<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>min</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>5</span><span class="token punctuation" data-v-510255f9>,</span> 
						<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'简介不能少于5个字'</span><span class="token punctuation" data-v-510255f9>,</span> 
						<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'change'</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span>
			<span class="token punctuation" data-v-510255f9>}</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
	<span class="token literal-property property" data-v-510255f9>methods</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token function" data-v-510255f9>submit</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>validate</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>valid</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>if</span> <span class="token punctuation" data-v-510255f9>(</span>valid<span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
					console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'验证通过'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
				<span class="token punctuation" data-v-510255f9>}</span> <span class="token keyword" data-v-510255f9>else</span> <span class="token punctuation" data-v-510255f9>{</span>
					console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'验证失败'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
				<span class="token punctuation" data-v-510255f9>}</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
		<span class="token punctuation" data-v-510255f9>}</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
	<span class="token comment" data-v-510255f9>// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕</span>
	<span class="token function" data-v-510255f9>onReady</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>setRules</span><span class="token punctuation" data-v-510255f9>(</span><span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>rules<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span>
<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
</code></pre></div><h4 id="u-form-item绑定label和prop" data-v-510255f9><a href="#u-form-item绑定label和prop" class="header-anchor" data-v-510255f9>#</a> U-form-item绑定<code data-v-510255f9>label</code>和<code data-v-510255f9>prop</code></h4> <p data-v-510255f9>此组件最大的作用是与<code data-v-510255f9>u-form</code>和<code data-v-510255f9>u-input</code>等组件进行交互，在表单验证时，需要绑定<code data-v-510255f9>prop</code>参数，此参数为<code data-v-510255f9>u-form</code>组件的<code data-v-510255f9>model</code>对象中的属性名，
目的是在验证时，通过这个<code data-v-510255f9>prop</code>属性名将父组件<code data-v-510255f9>u-form</code>的<code data-v-510255f9>model</code>和<code data-v-510255f9>rules</code>规则关联起来。</p> <p data-v-510255f9>注意点：</p> <ul data-v-510255f9><li data-v-510255f9>通过<code data-v-510255f9>prop</code>绑定对应的属性名，这里是字符串，而不是一个变量。</li> <li data-v-510255f9>通过<code data-v-510255f9>lable</code>参数设置左边显示的提示文字，另外通过<code data-v-510255f9>label-position</code>可以配置<code data-v-510255f9>label</code>在左边还是上方。</li></ul> <div class="language-html extra-class" data-v-510255f9><pre class="language-html" data-v-510255f9><code data-v-510255f9><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form</span> <span class="token attr-name" data-v-510255f9>:model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>姓名<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>name<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.name<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>简介<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>intro<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.intro<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token script" data-v-510255f9><span class="token language-javascript" data-v-510255f9>
<span class="token keyword" data-v-510255f9>export</span> <span class="token keyword" data-v-510255f9>default</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token function" data-v-510255f9>data</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>return</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>form</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请输入姓名'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token comment" data-v-510255f9>// 可以单个或者同时写两个触发验证方式</span>
						<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'blur,change'</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>min</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>5</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'简介不能少于5个字'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'change'</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span>
			<span class="token punctuation" data-v-510255f9>}</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
	<span class="token comment" data-v-510255f9>// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕</span>
	<span class="token function" data-v-510255f9>onReady</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>setRules</span><span class="token punctuation" data-v-510255f9>(</span><span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>rules<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span>
<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
</code></pre></div><p data-v-510255f9>从上面的示例我们可以看到，<code data-v-510255f9>rules</code>中的属性名和<code data-v-510255f9>form</code>的属性名是一致的，同时传递给<code data-v-510255f9>u-form-item</code>的<code data-v-510255f9>prop</code>参数绑定的也是相同的属性名，注意这里<code data-v-510255f9>prop</code>参数绑定的是
字符串(属性名)，而不是一个变量。</p> <h4 id="验证规则" data-v-510255f9><a href="#验证规则" class="header-anchor" data-v-510255f9>#</a> 验证规则</h4> <p data-v-510255f9>组件验证部分采用了<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer" data-v-510255f9>async-validator<span data-v-510255f9><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，一个字段可以设置多个内置规则，以及自定义规则，触发方式等，
每个字段的验证规则为一个数组，数组的每一个元素对象为其中一条规则(一个字段的验证可以配置多个规则)，如下：</p> <div class="language-js extra-class" data-v-510255f9><pre class="language-js" data-v-510255f9><code data-v-510255f9><span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
		<span class="token comment" data-v-510255f9>// 对name字段进行长度验证</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>min</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>5</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'简介不能少于5个字'</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'change'</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token comment" data-v-510255f9>// 对name字段进行必填验证</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请填写姓名'</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
	<span class="token punctuation" data-v-510255f9>]</span>
<span class="token punctuation" data-v-510255f9>}</span>
</code></pre></div><h4 id="验证规则属性" data-v-510255f9><a href="#验证规则属性" class="header-anchor" data-v-510255f9>#</a> 验证规则属性</h4> <p data-v-510255f9>每一个验证规则中，可以配置多个属性，下面对常用的属性进行讲解，更具体的可以查看<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer" data-v-510255f9>async-validator<span data-v-510255f9><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的文档说明：</p> <ul data-v-510255f9><li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>trigger</code>{String | Array}：触发校验的方式有2种：</p> <ul data-v-510255f9><li data-v-510255f9>change：字段值发生变化时校验</li> <li data-v-510255f9>blur：输入框失去焦点时触发</li> <li data-v-510255f9>如果同时监听两种方式，需要写成数组形式：<code data-v-510255f9>['change', 'blur']</code></li></ul></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>type</code>{String}<br data-v-510255f9>
内置校验规则，如这些规则无法满足需求，可以使用正则匹配、或者使用<code data-v-510255f9>validator</code>自定义方法并结合uView自带<a href="../js/test.html" data-v-510255f9>验证规则</a>。</p> <ul data-v-510255f9><li data-v-510255f9>string：必须是 <code data-v-510255f9>string</code> 类型，默认类型</li> <li data-v-510255f9>number：必须是 <code data-v-510255f9>number</code> 类型</li> <li data-v-510255f9>boolean：必须是 <code data-v-510255f9>boolean</code> 类型</li> <li data-v-510255f9>method：必须是 <code data-v-510255f9>function</code> 类型</li> <li data-v-510255f9>regexp：必须是 <code data-v-510255f9>regexp</code> 类型，这里的正则，指的是判断字段的内容是否一个正则表达式，而不是用这个正则去匹配字段值</li> <li data-v-510255f9>integer：必须是<code data-v-510255f9>整数</code>类型</li> <li data-v-510255f9>float：必须是<code data-v-510255f9>浮点数</code>类型</li> <li data-v-510255f9>array：必须是 <code data-v-510255f9>array</code> 类型</li> <li data-v-510255f9>object：必须是 <code data-v-510255f9>object</code> 类型</li> <li data-v-510255f9>enum：必须出现在 <code data-v-510255f9>enmu</code> 指定的值中</li> <li data-v-510255f9>date：必须是 <code data-v-510255f9>date</code> 类型</li> <li data-v-510255f9>url：必须是 <code data-v-510255f9>url</code> 类型</li> <li data-v-510255f9>hex：必须是 <code data-v-510255f9>16</code> 进制类型</li> <li data-v-510255f9>email：必须是 <code data-v-510255f9>email</code> 类型</li> <li data-v-510255f9>any：任意类型</li></ul></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>required</code><br data-v-510255f9>
布尔值，是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置<code data-v-510255f9>u-form-item</code>的<code data-v-510255f9>required</code>为<code data-v-510255f9>true</code></p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>pattern</code><br data-v-510255f9>
要求此参数值为一个正则表达式，如： /\d+/，<strong data-v-510255f9>不能</strong>带引号，如：&quot;/\d+/&quot;，组件会对字段进行正则判断，返回结果。</p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>min</code><br data-v-510255f9>
最小值，如果字段类型为字符串和数组，会取字符串长度与数组长度(length)与<code data-v-510255f9>min</code>比较，如果字段是数值，则直接与<code data-v-510255f9>min</code>比较。</p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>max</code><br data-v-510255f9>
最大值，规则同<code data-v-510255f9>min</code>参数</p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>len</code><br data-v-510255f9>
指定长度，规则同<code data-v-510255f9>min</code>，优先级高于<code data-v-510255f9>min</code>和<code data-v-510255f9>max</code></p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>enum</code>{Array}
指定的值，配合 type: 'enum' 使用</p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>whitespace</code>{Boolean}<br data-v-510255f9>
如果字段值内容都为空格，默认无法通过<code data-v-510255f9>required: true</code>校验，如果要允许通过，需要将此参数设置为<code data-v-510255f9>true</code></p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>transform</code>{Function}，校验前对值进行转换，函数的参数为当前值，返回值为改变后的值，参数如如下：</p> <ul data-v-510255f9><li data-v-510255f9><code data-v-510255f9>value</code>：当前校验字段的值</li></ul></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>message</code><br data-v-510255f9>
校验不通过时的提示信息</p></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>validator</code>{Function}：自定义<strong data-v-510255f9>同步</strong>校验函数，参数如下：</p> <ul data-v-510255f9><li data-v-510255f9><code data-v-510255f9>rule</code>：当前校验字段在 rules 中所对应的校验规则</li> <li data-v-510255f9><code data-v-510255f9>value</code>：当前校验字段的值</li> <li data-v-510255f9><code data-v-510255f9>callback</code>：校验完成时的回调，一般无需执行callback，返回<code data-v-510255f9>true</code>(校验通过)或者<code data-v-510255f9>false</code>(校验失败)即可</li></ul></li> <li data-v-510255f9><p data-v-510255f9><code data-v-510255f9>asyncValidator</code>{Function}：自定义<strong data-v-510255f9>异步</strong>校验函数，参数如下：</p> <ul data-v-510255f9><li data-v-510255f9><code data-v-510255f9>rule</code>：当前校验字段在 rules 中所对应的校验规则</li> <li data-v-510255f9><code data-v-510255f9>value</code>：当前校验字段的值</li> <li data-v-510255f9><code data-v-510255f9>callback</code>：校验完成时的回调，执行完异步操作(比如向后端请求数据验证)，如果不通过，需要callback(new Error('提示错误信息'))，如果校验通过，执行callback()即可</li></ul></li></ul> <h4 id="uview自带验证规则" data-v-510255f9><a href="#uview自带验证规则" class="header-anchor" data-v-510255f9>#</a> uView自带验证规则</h4> <p data-v-510255f9>uView在JS板块的<a href="../js/test.html" data-v-510255f9>Test 规则校验</a>中有大量内置的验证规则，这些规则对表单验证来说，属于<strong data-v-510255f9>自定义规则</strong>，故需要用到上方规则属性的
<code data-v-510255f9>validator</code>自定义验证函数，这里做一个详细说明。</p> <p data-v-510255f9>我们知道uView有自带的判断手机号的验证方法<code data-v-510255f9>this.$u.test.mobile(value)</code>，但是<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer" data-v-510255f9>async-validator<span data-v-510255f9><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>没有
内置判断手机号的规则，所以将二者结合使用：</p> <div class="language-js extra-class" data-v-510255f9><pre class="language-js" data-v-510255f9><code data-v-510255f9><span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token comment" data-v-510255f9>// 字段名称</span>
	<span class="token literal-property property" data-v-510255f9>mobile</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span> 
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请输入手机号'</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token comment" data-v-510255f9>// 自定义验证函数，见上说明</span>
			<span class="token function-variable function" data-v-510255f9>validator</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>rule<span class="token punctuation" data-v-510255f9>,</span> value<span class="token punctuation" data-v-510255f9>,</span> callback</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token comment" data-v-510255f9>// 上面有说，返回true表示校验通过，返回false表示不通过</span>
				<span class="token comment" data-v-510255f9>// this.$u.test.mobile()就是返回true或者false的</span>
				<span class="token keyword" data-v-510255f9>return</span> <span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$u<span class="token punctuation" data-v-510255f9>.</span>test<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>mobile</span><span class="token punctuation" data-v-510255f9>(</span>value<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'手机号码不正确'</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token comment" data-v-510255f9>// 触发器可以同时用blur和change</span>
			<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token punctuation" data-v-510255f9>}</span>
	<span class="token punctuation" data-v-510255f9>]</span>
<span class="token punctuation" data-v-510255f9>}</span>
</code></pre></div><h4 id="综合实战" data-v-510255f9><a href="#综合实战" class="header-anchor" data-v-510255f9>#</a> 综合实战</h4> <p data-v-510255f9>上面讲述了<a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noopener noreferrer" data-v-510255f9>async-validator<span data-v-510255f9><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>的规则和配置，以及uView内置规则的结合使用，下面我们进行一个综合
实战示例，要入对某一个字段进行如下验证(验证实现有多种方法，下方仅为引导示例，非唯一，或最优做法)：</p> <ol data-v-510255f9><li data-v-510255f9>必填，同时可接受<code data-v-510255f9>change</code>和<code data-v-510255f9>blur</code>触发校验：配置<code data-v-510255f9>required</code>参数为<code data-v-510255f9>true</code>，同时配置<code data-v-510255f9>trigger</code>为<code data-v-510255f9>[change, bulr]</code></li> <li data-v-510255f9>必须为字母或字符串，校验前先将字段值转为字符串类型：通过<code data-v-510255f9>pattern</code>参数配置正则：/^[0-9a-zA-Z]*$/g，通过<code data-v-510255f9>transform</code>参数在校验前对字段值转换为字符串</li> <li data-v-510255f9>长度6-8个字符之间：通过 配置<code data-v-510255f9>min</code>为6，<code data-v-510255f9>max</code>为8</li> <li data-v-510255f9>需要包含字母&quot;A&quot;：使用uView的<code data-v-510255f9>this.$u.test.contains()</code>方法，并结合<code data-v-510255f9>validator</code>自定义函数实现</li> <li data-v-510255f9>异步校验，输入完账号，输入框失去焦点时，向后端请求该账号是否已存在：通过上方的<code data-v-510255f9>asyncValidator</code>异步函数进行验证。</li></ol> <p data-v-510255f9>综上，我们可以得出如下的一个配置规则(仅为综合演示，非最优做法)：</p> <div class="language-js extra-class" data-v-510255f9><pre class="language-js" data-v-510255f9><code data-v-510255f9><span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
		<span class="token comment" data-v-510255f9>// 必填规则</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'此为必填字段'</span>，
			<span class="token comment" data-v-510255f9>// blur和change事件触发检验</span>
			<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token comment" data-v-510255f9>// 正则判断为字母或数字</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>pattern</span><span class="token operator" data-v-510255f9>:</span> <span class="token regex" data-v-510255f9><span class="token regex-delimiter" data-v-510255f9>/</span><span class="token regex-source language-regex" data-v-510255f9>^[0-9a-zA-Z]*$</span><span class="token regex-delimiter" data-v-510255f9>/</span><span class="token regex-flags" data-v-510255f9>g</span></span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token comment" data-v-510255f9>// 正则检验前先将值转为字符串</span>
			<span class="token function" data-v-510255f9>transform</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>value</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>return</span> <span class="token function" data-v-510255f9>String</span><span class="token punctuation" data-v-510255f9>(</span>value<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'只能包含字母或数字'</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token comment" data-v-510255f9>// 6-8个字符之间的判断</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>min</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>6</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>max</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>8</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'长度在6-8个字符之间'</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token comment" data-v-510255f9>// 自定义规则判断是否包含字母&quot;A&quot;</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token function-variable function" data-v-510255f9>validator</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>rule<span class="token punctuation" data-v-510255f9>,</span> value<span class="token punctuation" data-v-510255f9>,</span> callback</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>return</span> <span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$u<span class="token punctuation" data-v-510255f9>.</span>test<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>contains</span><span class="token punctuation" data-v-510255f9>(</span>value<span class="token punctuation" data-v-510255f9>,</span> <span class="token string" data-v-510255f9>&quot;A&quot;</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'必须包含字母&quot;A&quot;'</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token comment" data-v-510255f9>// 校验用户是否已存在</span>
		<span class="token punctuation" data-v-510255f9>{</span>
			<span class="token function-variable function" data-v-510255f9>asyncValidator</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>rule<span class="token punctuation" data-v-510255f9>,</span> value<span class="token punctuation" data-v-510255f9>,</span> callback</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$u<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>post</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'/xxx/xxx'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token punctuation" data-v-510255f9>{</span><span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> value<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>then</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>res</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
					<span class="token comment" data-v-510255f9>// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')</span>
					<span class="token keyword" data-v-510255f9>if</span><span class="token punctuation" data-v-510255f9>(</span>res<span class="token punctuation" data-v-510255f9>.</span>error<span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
						<span class="token function" data-v-510255f9>callback</span><span class="token punctuation" data-v-510255f9>(</span><span class="token keyword" data-v-510255f9>new</span> <span class="token class-name" data-v-510255f9>Error</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'姓名重复'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
					<span class="token punctuation" data-v-510255f9>}</span> <span class="token keyword" data-v-510255f9>else</span> <span class="token punctuation" data-v-510255f9>{</span>
						<span class="token comment" data-v-510255f9>// 如果校验通过，也要执行callback()回调</span>
						<span class="token function" data-v-510255f9>callback</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token comment" data-v-510255f9>// 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可</span>
			<span class="token comment" data-v-510255f9>// message: 'xxx'</span>
		<span class="token punctuation" data-v-510255f9>}</span>
	<span class="token punctuation" data-v-510255f9>]</span>
<span class="token punctuation" data-v-510255f9>}</span>
</code></pre></div><h4 id="校验错误提示方式" data-v-510255f9><a href="#校验错误提示方式" class="header-anchor" data-v-510255f9>#</a> 校验错误提示方式</h4> <p data-v-510255f9>uView提供了多种校验的错误提示方式，这些值需要包含在数组(可以填写多个值，同时进行多种提示)中，传递给<code data-v-510255f9>Form</code>组件的<code data-v-510255f9>errory-type</code>参数：</p> <ul data-v-510255f9><li data-v-510255f9><code data-v-510255f9>message</code>：默认为输入框下方用文字进行提示</li> <li data-v-510255f9><code data-v-510255f9>none</code>：只要包含此值，将不会进行任何提示</li> <li data-v-510255f9><code data-v-510255f9>border-bottom</code>：配置作用域底部的下划线显示为红色</li> <li data-v-510255f9><code data-v-510255f9>toast</code>：以&quot;toast&quot;提示的方式弹出错误信息，每次只弹出最前面的那个表单域的错误信息(1.3.5新增)</li></ul> <div class="language-html extra-class" data-v-510255f9><pre class="language-html" data-v-510255f9><code data-v-510255f9><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form</span> <span class="token attr-name" data-v-510255f9>:error-type</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>errorType<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		......
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token script" data-v-510255f9><span class="token language-javascript" data-v-510255f9>
<span class="token keyword" data-v-510255f9>export</span> <span class="token keyword" data-v-510255f9>default</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token function" data-v-510255f9>data</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>return</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token comment" data-v-510255f9>// 文字提示</span>
			<span class="token literal-property property" data-v-510255f9>errorType</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'message'</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token comment" data-v-510255f9>// 不提示</span>
			<span class="token comment" data-v-510255f9>// errorType: ['none'],</span>
			<span class="token comment" data-v-510255f9>// 文字和下划线提示</span>
			<span class="token comment" data-v-510255f9>// errorType: ['message', 'border-bottom'],</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span>
<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
</code></pre></div><h4 id="校验" data-v-510255f9><a href="#校验" class="header-anchor" data-v-510255f9>#</a> 校验</h4> <p data-v-510255f9>进行了上方的配置和讲解后，进入到最后一步，执行验证：<br data-v-510255f9>
需要通过<code data-v-510255f9>ref</code>调用<code data-v-510255f9>Form</code>组件的<code data-v-510255f9>validate</code>方法，该方法回调函数的参数为一个布尔值，<code data-v-510255f9>true</code>为校验通过，否则反之。</p> <div class="language-html extra-class" data-v-510255f9><pre class="language-html" data-v-510255f9><code data-v-510255f9><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>view</span> <span class="token attr-name" data-v-510255f9>class</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span><span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form</span> <span class="token attr-name" data-v-510255f9>:model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>ref</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form1<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>姓名<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>name<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
				<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form.name<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-button</span> <span class="token attr-name" data-v-510255f9>@click</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>submit<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>提交<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-button</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>view</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token script" data-v-510255f9><span class="token language-javascript" data-v-510255f9>
<span class="token keyword" data-v-510255f9>export</span> <span class="token keyword" data-v-510255f9>default</span> <span class="token punctuation" data-v-510255f9>{</span>
	<span class="token function" data-v-510255f9>data</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>return</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>form</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>''</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span>
					<span class="token punctuation" data-v-510255f9>{</span>
						<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请输入姓名'</span><span class="token punctuation" data-v-510255f9>,</span>
						<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>]</span>
					<span class="token punctuation" data-v-510255f9>}</span>
				<span class="token punctuation" data-v-510255f9>]</span>
			<span class="token punctuation" data-v-510255f9>}</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
	<span class="token literal-property property" data-v-510255f9>methods</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token function" data-v-510255f9>submit</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>validate</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>valid</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
				<span class="token keyword" data-v-510255f9>if</span> <span class="token punctuation" data-v-510255f9>(</span>valid<span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
					console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'验证通过'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
				<span class="token punctuation" data-v-510255f9>}</span> <span class="token keyword" data-v-510255f9>else</span> <span class="token punctuation" data-v-510255f9>{</span>
					console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'验证失败'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
				<span class="token punctuation" data-v-510255f9>}</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
		<span class="token punctuation" data-v-510255f9>}</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
	<span class="token comment" data-v-510255f9>// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕</span>
	<span class="token function" data-v-510255f9>onReady</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
		<span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>$refs<span class="token punctuation" data-v-510255f9>.</span>form1<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>setRules</span><span class="token punctuation" data-v-510255f9>(</span><span class="token keyword" data-v-510255f9>this</span><span class="token punctuation" data-v-510255f9>.</span>rules<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span>
<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>;</span>
</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
</code></pre></div><h3 id="vue3-setup-示例" data-v-510255f9><a href="#vue3-setup-示例" class="header-anchor" data-v-510255f9>#</a> Vue3 setup 示例</h3> <div class="language-html extra-class" data-v-510255f9><pre class="language-html" data-v-510255f9><code data-v-510255f9><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>view</span> <span class="token attr-name" data-v-510255f9>class</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>app<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form</span> <span class="token attr-name" data-v-510255f9>:model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>data.formData<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>ref</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>form1<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>姓名<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>name<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>data.formData.name<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
			<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-form-item</span> <span class="token attr-name" data-v-510255f9>label</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>简介<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token attr-name" data-v-510255f9>prop</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>intro<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-input</span> <span class="token attr-name" data-v-510255f9>v-model</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>data.formData.intro<span class="token punctuation" data-v-510255f9>&quot;</span></span> <span class="token punctuation" data-v-510255f9>/&gt;</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form-item</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-form</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

		<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>u-button</span> <span class="token attr-name" data-v-510255f9>@click</span><span class="token attr-value" data-v-510255f9><span class="token punctuation attr-equals" data-v-510255f9>=</span><span class="token punctuation" data-v-510255f9>&quot;</span>submit<span class="token punctuation" data-v-510255f9>&quot;</span></span><span class="token punctuation" data-v-510255f9>&gt;</span></span>提交<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>u-button</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
	<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>view</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>template</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>

<span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;</span>script</span> <span class="token attr-name" data-v-510255f9>setup</span><span class="token punctuation" data-v-510255f9>&gt;</span></span><span class="token script" data-v-510255f9><span class="token language-javascript" data-v-510255f9>
	<span class="token keyword" data-v-510255f9>import</span> <span class="token punctuation" data-v-510255f9>{</span> ref<span class="token punctuation" data-v-510255f9>,</span> reactive<span class="token punctuation" data-v-510255f9>,</span> onMounted<span class="token punctuation" data-v-510255f9>,</span> unref<span class="token punctuation" data-v-510255f9>,</span> computed<span class="token punctuation" data-v-510255f9>,</span> watch <span class="token punctuation" data-v-510255f9>}</span> <span class="token keyword" data-v-510255f9>from</span> <span class="token string" data-v-510255f9>'vue'</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token keyword" data-v-510255f9>import</span> <span class="token punctuation" data-v-510255f9>{</span> onLoad<span class="token punctuation" data-v-510255f9>,</span> onReady <span class="token punctuation" data-v-510255f9>}</span> <span class="token keyword" data-v-510255f9>from</span> <span class="token string" data-v-510255f9>'@dcloudio/uni-app'</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token keyword" data-v-510255f9>const</span> form1 <span class="token operator" data-v-510255f9>=</span> <span class="token function" data-v-510255f9>ref</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token keyword" data-v-510255f9>const</span> data <span class="token operator" data-v-510255f9>=</span> <span class="token function" data-v-510255f9>reactive</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>{</span>
		<span class="token literal-property property" data-v-510255f9>formData</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;&quot;</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;&quot;</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>,</span>
		<span class="token literal-property property" data-v-510255f9>rules</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token literal-property property" data-v-510255f9>name</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>required</span><span class="token operator" data-v-510255f9>:</span> <span class="token boolean" data-v-510255f9>true</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'请输入姓名'</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token comment" data-v-510255f9>// 可以单个或者同时写两个触发验证方式 </span>
				<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token string" data-v-510255f9>'change'</span><span class="token punctuation" data-v-510255f9>,</span> <span class="token string" data-v-510255f9>'blur'</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>]</span><span class="token punctuation" data-v-510255f9>,</span>
			<span class="token literal-property property" data-v-510255f9>intro</span><span class="token operator" data-v-510255f9>:</span> <span class="token punctuation" data-v-510255f9>[</span><span class="token punctuation" data-v-510255f9>{</span>
				<span class="token literal-property property" data-v-510255f9>min</span><span class="token operator" data-v-510255f9>:</span> <span class="token number" data-v-510255f9>5</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>message</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'简介不能少于5个字'</span><span class="token punctuation" data-v-510255f9>,</span>
				<span class="token literal-property property" data-v-510255f9>trigger</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'change'</span>
			<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>]</span>
		<span class="token punctuation" data-v-510255f9>}</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>

	<span class="token function" data-v-510255f9>onReady</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
		form1<span class="token punctuation" data-v-510255f9>.</span>value<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>setRules</span><span class="token punctuation" data-v-510255f9>(</span>data<span class="token punctuation" data-v-510255f9>.</span>rules<span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>

	<span class="token keyword" data-v-510255f9>const</span> <span class="token function-variable function" data-v-510255f9>submit</span> <span class="token operator" data-v-510255f9>=</span> <span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>e</span><span class="token punctuation" data-v-510255f9>)</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
		form1<span class="token punctuation" data-v-510255f9>.</span>value<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>validate</span><span class="token punctuation" data-v-510255f9>(</span><span class="token parameter" data-v-510255f9>valid</span> <span class="token operator" data-v-510255f9>=&gt;</span> <span class="token punctuation" data-v-510255f9>{</span>
			<span class="token keyword" data-v-510255f9>if</span> <span class="token punctuation" data-v-510255f9>(</span>valid<span class="token punctuation" data-v-510255f9>)</span> <span class="token punctuation" data-v-510255f9>{</span>
				uni<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>showToast</span><span class="token punctuation" data-v-510255f9>(</span><span class="token punctuation" data-v-510255f9>{</span>
					<span class="token literal-property property" data-v-510255f9>title</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>&quot;验证通过&quot;</span><span class="token punctuation" data-v-510255f9>,</span>
					<span class="token literal-property property" data-v-510255f9>icon</span><span class="token operator" data-v-510255f9>:</span> <span class="token string" data-v-510255f9>'none'</span>
				<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
				console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'验证通过'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span> <span class="token keyword" data-v-510255f9>else</span> <span class="token punctuation" data-v-510255f9>{</span>
				console<span class="token punctuation" data-v-510255f9>.</span><span class="token function" data-v-510255f9>log</span><span class="token punctuation" data-v-510255f9>(</span><span class="token string" data-v-510255f9>'验证失败'</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
			<span class="token punctuation" data-v-510255f9>}</span>
		<span class="token punctuation" data-v-510255f9>}</span><span class="token punctuation" data-v-510255f9>)</span><span class="token punctuation" data-v-510255f9>;</span>
	<span class="token punctuation" data-v-510255f9>}</span>
</span></span><span class="token tag" data-v-510255f9><span class="token tag" data-v-510255f9><span class="token punctuation" data-v-510255f9>&lt;/</span>script</span><span class="token punctuation" data-v-510255f9>&gt;</span></span>
</code></pre></div><h3 id="api" data-v-510255f9><a href="#api" class="header-anchor" data-v-510255f9>#</a> API</h3> <h3 id="form-props" data-v-510255f9><a href="#form-props" class="header-anchor" data-v-510255f9>#</a> Form Props</h3> <table data-v-510255f9><thead data-v-510255f9><tr data-v-510255f9><th data-v-510255f9>参数</th> <th data-v-510255f9>说明</th> <th data-v-510255f9>类型</th> <th data-v-510255f9>默认值</th> <th data-v-510255f9>可选值</th></tr></thead> <tbody data-v-510255f9><tr data-v-510255f9><td data-v-510255f9>model</td> <td data-v-510255f9>表单数据对象</td> <td data-v-510255f9>Object</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>rules</td> <td data-v-510255f9>通过<code data-v-510255f9>ref</code>设置，见上方说明</td> <td data-v-510255f9>Object</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>error-type</td> <td data-v-510255f9>错误的提示方式，数组形式，见上方说明</td> <td data-v-510255f9>Array</td> <td data-v-510255f9>['message']</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>border-bottom</td> <td data-v-510255f9>是否显示表单域的下划线边框</td> <td data-v-510255f9>Boolean</td> <td data-v-510255f9>true</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-position</td> <td data-v-510255f9>表单域提示文字的位置，<code data-v-510255f9>left</code>-左侧，<code data-v-510255f9>top</code>-上方</td> <td data-v-510255f9>String</td> <td data-v-510255f9>left</td> <td data-v-510255f9>top</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-width</td> <td data-v-510255f9>提示文字的宽度，单位rpx</td> <td data-v-510255f9>String | Number</td> <td data-v-510255f9>90</td> <td data-v-510255f9>数值 / auto</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-style</td> <td data-v-510255f9><code data-v-510255f9>lable</code>的样式，对象形式</td> <td data-v-510255f9>Object</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-align</td> <td data-v-510255f9><code data-v-510255f9>lable</code>的对齐方式</td> <td data-v-510255f9>String</td> <td data-v-510255f9>left</td> <td data-v-510255f9>center / right</td></tr></tbody></table> <h3 id="form-methods" data-v-510255f9><a href="#form-methods" class="header-anchor" data-v-510255f9>#</a> Form Methods</h3> <p data-v-510255f9>此方法如要通过ref手动调用</p> <table data-v-510255f9><thead data-v-510255f9><tr data-v-510255f9><th data-v-510255f9>名称</th> <th data-v-510255f9>说明</th> <th data-v-510255f9>参数</th></tr></thead> <tbody data-v-510255f9><tr data-v-510255f9><td data-v-510255f9>setRules</td> <td data-v-510255f9>调用此方法，设置校验规则</td> <td data-v-510255f9>Function(rules)</td></tr> <tr data-v-510255f9><td data-v-510255f9>resetFields</td> <td data-v-510255f9>对整个表单进行重置，将所有字段值重置为初始值并移除校验结果</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>validate</td> <td data-v-510255f9>对整个表单进行校验的方法</td> <td data-v-510255f9>Function(callback: Function(boolean))</td></tr></tbody></table> <h3 id="form-item-props" data-v-510255f9><a href="#form-item-props" class="header-anchor" data-v-510255f9>#</a> Form-item Props</h3> <table data-v-510255f9><thead data-v-510255f9><tr data-v-510255f9><th data-v-510255f9>参数</th> <th data-v-510255f9>说明</th> <th data-v-510255f9>类型</th> <th data-v-510255f9>默认值</th> <th data-v-510255f9>可选值</th></tr></thead> <tbody data-v-510255f9><tr data-v-510255f9><td data-v-510255f9>label</td> <td data-v-510255f9>左侧提示文字</td> <td data-v-510255f9>String</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>prop</td> <td data-v-510255f9>表单域<code data-v-510255f9>model</code>对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的</td> <td data-v-510255f9>String</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>border-bottom</td> <td data-v-510255f9>是否显示下边框，如不需要下边框，需同时将<code data-v-510255f9>u-form</code>的同名参数设置为<code data-v-510255f9>false</code></td> <td data-v-510255f9>Boolean</td> <td data-v-510255f9>true</td> <td data-v-510255f9>true / false</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-position</td> <td data-v-510255f9>表单域提示文字的位置，<code data-v-510255f9>left</code>-左侧，<code data-v-510255f9>top</code>-上方，如设置，将覆盖<code data-v-510255f9>u-form</code>的同名参数</td> <td data-v-510255f9>String</td> <td data-v-510255f9>-</td> <td data-v-510255f9>left / top</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-width</td> <td data-v-510255f9>提示文字的宽度，单位rpx，如设置，将覆盖<code data-v-510255f9>u-form</code>的同名参数</td> <td data-v-510255f9>String | Number</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-style</td> <td data-v-510255f9><code data-v-510255f9>lable</code>的样式，对象形式，如设置，将覆盖<code data-v-510255f9>u-form</code>的同名参数</td> <td data-v-510255f9>Object</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>label-align</td> <td data-v-510255f9><code data-v-510255f9>lable</code>的对齐方式，如设置，将覆盖<code data-v-510255f9>u-form</code>的同名参数</td> <td data-v-510255f9>String</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>right-icon</td> <td data-v-510255f9>右侧自定义字体图标(限uView内置图标)或图片地址</td> <td data-v-510255f9>String</td> <td data-v-510255f9>-</td> <td data-v-510255f9></td></tr> <tr data-v-510255f9><td data-v-510255f9>left-icon</td> <td data-v-510255f9>左侧自定义字体图标(限uView内置图标)或图片地址</td> <td data-v-510255f9>String</td> <td data-v-510255f9>-</td> <td data-v-510255f9></td></tr> <tr data-v-510255f9><td data-v-510255f9>left-icon-style</td> <td data-v-510255f9>左侧图标的样式，对象形式</td> <td data-v-510255f9>Object</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>right-icon-style</td> <td data-v-510255f9>右侧图标的样式，对象形式</td> <td data-v-510255f9>Object</td> <td data-v-510255f9>-</td> <td data-v-510255f9>-</td></tr> <tr data-v-510255f9><td data-v-510255f9>required</td> <td data-v-510255f9>是否显示左边的&quot;*&quot;号，这里仅起展示作用，如需校验必填，请通过<code data-v-510255f9>rules</code>配置必填规则</td> <td data-v-510255f9>Boolean</td> <td data-v-510255f9>false</td> <td data-v-510255f9>true</td></tr></tbody></table> <h3 id="form-item-slot" data-v-510255f9><a href="#form-item-slot" class="header-anchor" data-v-510255f9>#</a> Form-item Slot</h3> <table data-v-510255f9><thead data-v-510255f9><tr data-v-510255f9><th style="text-align:left;" data-v-510255f9>名称</th> <th style="text-align:left;" data-v-510255f9>说明</th></tr></thead> <tbody data-v-510255f9><tr data-v-510255f9><td style="text-align:left;" data-v-510255f9>-</td> <td style="text-align:left;" data-v-510255f9>Form Item 的内容</td></tr> <tr data-v-510255f9><td style="text-align:left;" data-v-510255f9>right</td> <td style="text-align:left;" data-v-510255f9>右侧自定义内容，可以在此传入一个按钮，用于获取验证码等场景</td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="edit-link"><a href="https://gitee.com/vk-uni/vk-uview-ui-doc.git/edit/master/docs/components/form.md" target="_blank" rel="noopener noreferrer">编辑此页（一起来纠错与优化，方便你我Ta）</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">最后修改时间:</span> <span class="time">6/26/2023, 4:18:32 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="input.html" class="prev">
        Input 输入框
      </a></span> <span class="next"><a href="calendar.html">
        Calendar 日历
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
		<script src="../assets/js/app.06a5b7ec.js" defer></script><script src="../assets/js/3.b1cc55a0.js" defer></script><script src="../assets/js/4.4b844322.js" defer></script><script src="../assets/js/41.f590ad3d.js" defer></script><script src="../assets/js/19.2b0b9da7.js" defer></script><script src="../assets/js/9.ba52e2b0.js" defer></script><script src="../assets/js/6.2c513bee.js" defer></script>
	</body>

<!-- Mirrored from vkuviewdoc.fsq.pub/components/form.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 May 2025 17:31:01 GMT -->
</html>
